<template>
  <div class="post-item">
    <el-image :src="post.imageUrl" fit="contain"></el-image>
    <div class="content">
      <div class="name">{{ post.title }}</div>
      <div class="tags">
        <el-tag type="primary" v-for="tag in post.tags">{{ tag }}</el-tag>
      </div>
    </div>
    <div class="status">
      <div class="is-private">{{ post.privateCondition ? '仅自己可见' : '公开' }}</div>
      <div class="is-save">
        <div class="round" :style="{ backgroundColor: post.saveCondition ? 'red' : 'green' }"></div>
        <div class="is-save-status">{{ post.saveCondition ? '编辑中' : '已发布' }}</div>
      </div>
    </div>
    <div class="action">
      <el-button type="primary" :icon="Edit" @click="edit" />
      <el-popconfirm title="删除记录?" @confirm="deletePosts">
        <template #reference>
          <el-button type="primary" :icon="Delete" />
        </template>
      </el-popconfirm>
    </div>
  </div>
</template>

<script setup>
import { deletePost } from '@/api/forum'
import { Delete, Edit } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'

const router = useRouter()

const props = defineProps({
  obj: Object,
})

const emit = defineEmits(['delete'])

// 帖子信息
const post = props.obj

// 编辑帖子
const edit = () => {
  router.push({ path: `/forum/post/addnewpost/${post.id}` })
}

// 删除帖子
const deletePosts = async () => {
  const res = (await deletePost(post.id)).data
  if (res.success) {
    ElNotification({
      title: '成功',
      message: '删除成功',
      type: 'success',
    })
    emit('delete')
  } else {
    ElNotification({
      title: '失败',
      message: '删除失败，请稍后重试',
      type: 'error',
    })
  }
}
</script>

<style scoped less="scss">
.post-item {
  display: flex;
  align-items: center;
  gap: 30px;

  width: 95%;
  height: 84px;
  cursor: pointer;
  background-color: #f5faf6;
  border-radius: 8px;
  transition: all 0.3s;
  box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.1);
  font-size: 14px;
  color: grey;

  .el-image {
    width: 120px;
    height: 80px;
    padding: 5px;
    border-radius: 20px;
  }

  .content {
    .tags {
      display: flex;
      gap: 3px;
    }
  }

  .status {
    .is-save {
      .round {
        display: inline-block;

        width: 10px;
        height: 10px;
        border-radius: 10px;
        background-color: green;
      }

      .is-save-status {
        display: inline-block;

        margin-left: 3px;
      }
    }
  }

  .action {
    display: flex;

    align-items: center;
    margin-left: 50%;
  }
}

.post-item:hover {
  box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.1);
}
</style>
